import React, { memo, useRef, useState } from 'react';
import { ItemWrapper } from './style';

// import Rating from '@mui/material/Rating';
import { Carousel } from 'antd';
import { Rate } from 'antd';

import IconArrowLeft from 'src/assets/svg/icon-arrow-left';
import IconArrowRight from 'src/assets/svg/icon-arrow-right';
import Indicator from 'src/base-ui/indicator';
import classNames from 'classnames';

const RoomItem = memo((props) => {
  const { itemData, itemWidth = '25%',itemClick } = props;

  // 记录索引
  const [selectIndex, setSelectIndex] = useState(0);
  const carouselRef = useRef();

  // 事件处理逻辑
  function controlClickHandle(isRight = true,event) {
    // 上一个 下一个
    isRight ? carouselRef.current.next() : carouselRef.current.prev();

    // 最新索引
    let newIndex = isRight ? selectIndex + 1 : selectIndex - 1;
    const length = itemData.picture_urls.length
    if (newIndex < 0) newIndex = length - 1;
    if (newIndex > length - 1) newIndex = 0;
    setSelectIndex(newIndex)
    // 阻止事件冒泡
    event.stopPropagation()
  }


  function itemClickHandle() {
    if(itemClick) itemClick(itemData)
  }

  const pictureElement = (
    <div className="cover">
      <img src={itemData.picture_url} alt="" />
    </div>
  );
  const swiperElement = (
    <div className="swiper">
      <div className="control">
        <div className="left" onClick={(e) => controlClickHandle(false,e)}>
          <IconArrowLeft width="30" height="30" />
        </div>
        <div className="right" onClick={(e) => controlClickHandle(true,e)}>
          <IconArrowRight width="30" height="30" />
        </div>
      </div>
      <Carousel dots={false} ref={carouselRef}>
        {itemData?.picture_urls?.map((item) => (
          <div className="cover" key={item}>
            <img src={item} alt="" />
          </div>
        ))}
      </Carousel>
      <div className="indicator">
        <Indicator selectIndex={selectIndex}>
          {itemData?.picture_urls?.map((item, index) => (
            <div key={index} className="dot-item">
              <span className={classNames('dot', { active: selectIndex === index })}> </span>
            </div>
          ))}
        </Indicator>
      </div>
    </div>
  );
  return (
    <ItemWrapper $verifyColor={itemData?.verify_info?.text_color || '#39576a'} $itemWidth={itemWidth} onClick={itemClickHandle}>
      <div className="inner">
      
        { 
          !itemData.picture_urls ? pictureElement : swiperElement
        }

        <div className="desc">{itemData.verify_info.messages.join(' • ')}</div>
        <div className="name">{itemData.name}</div>
        <div className="price">{itemData.price_format}/晚</div>
        {/* <Rating name="read-only" value={itemData.reviews_count} readOnly /> */}

        <div className="bot">
          <Rate
            disabled
            defaultValue={itemData?.star_rating ?? 5}
            allowHalf
            count={5}
            style={{ fontSize: 10, color: itemData?.star_rating_color, marginRight: -10 }}
          />
          <div className="bot-info">
            <span>{itemData.reviews_count}</span>
            <span style={{ color: itemData?.bottom_info?.content_color, fontSize: itemData?.bottom_info?.font_size }}>
              {itemData.bottom_info?.content}
            </span>
          </div>
        </div>
      </div>
    </ItemWrapper>
  );
});

export default RoomItem;
